﻿@{
    ViewBag.CurrentMenu = "Menu";
    Layout = "_Layout";
}
<div class="layui-row">
    <div class="layui-col-md3">
        <ul id="MenuTree" class="ztree"> </ul>
    </div>
    <div class="layui-col-md9">
        <div id="searchBar"></div>
        <table id="menuTable" class="layui-table" lay-filter="menuTable"></table>
    </div>
</div>
<script type="text/javascript">
    function vModel() {
        this.edit = ko.observable(false);
        this.del = ko.observable(false);
    }
    var model = new vModel();
    var selectedMenuId = "00000000-0000-0000-0000-000000000000";
    var cols ="";

    layui.use(['table', 'ztree', 'jquery', 'searchTable'],
        function () {
            var table = layui.table, ztree = layui.ztree, $ = layui.jquery, searchTable = layui.searchTable;
            //加载表头
            var loadCols = function () {
                $.ajax({
                    url: '@Url.Action("GetMenuTableCols", "Menu")',
                    type: 'post',
                    dataType: 'json',
                    success: function (res) {
                        if (res.success) {
                            cols = [res.data];
                        } else {
                            admin_error(res.msg);
                        }
                    }
                });
            };

            var initTree = function () {
                var zTreeObj;
                var setting = {
                    view: { selectedMulti: false },
                    data: {
                        key: {
                            name: 'text',
                            title: 'text'
                        },
                        simpleData: {
                            enable: true,
                            idKey: 'id',
                            pIdKey: 'parent'
                        }
                    },
                    callback: {
                        beforeClick: beforeClick
                    }

                };
                $.ajax({
                    type: "Get",
                    url: "/Menu/GetMenuTreeData?_t=" + new Date().getTime(), //获取数据的ajax请求地址
                    success: function (res) {
                        if (!res.success) {
                            admin_error(res.msg);
                        }
                        zTreeObj = $.fn.zTree.init($("#MenuTree"), setting, res.data);
                        zTreeObj.expandAll(true);
                        $("#MenuTree_1_span").click();
                    }
                });
            };
            function beforeClick(treeId, treeNode, clickFlag) {
                if (treeNode) {
                    selectedMenuId = treeNode.id;
                    loadTables();
                };
                return (treeNode.click != false);
            }

            //加载表格数据
            var loadTables = function () {
                var tableIns = table.render({
                    elem: '#menuTable',
                    id: 'menuTable',
                    url: "/Menu/GetMneusByParent?parentId=" + selectedMenuId + "&_t=" + new Date().getTime(),
                    page: true, //开启分页
                    loading: true,
                    toolbar: '#toolbarButton',
                    height: 'full-120',
                    autoSort: false,
                    cols: cols
                });
                searchTable.init(tableIns);
            };
            $(document).ready(function () {
                loadCols();
                initTree();
            });
            //监听排序
            table.on('sort(menuTable)', function (obj) {
                table.reload('menuTable', {
                    initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                    , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                        field: obj.field //排序字段
                        , order: obj.type //排序方式
                    }
                });
            });

            //表头工具栏事件
            table.on('toolbar(menuTable)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                var data = checkStatus.data;
                switch (obj.event) {
                    case 'loadTopMenu':
                        selectedMenuId = "00000000-0000-0000-0000-000000000000";
                        loadTables();
                        break;
                    case 'editMenu':
                        if (data.length != 1) {
                            top.layer.msg("请选择一行数据。", { icon: 0, offset: '15px' });
                            return false;
                        }
                        top.layer.open({
                            title: '编辑',
                            area: ["600px", "500px"],
                            type: 2,
                            maxmin: true,
                            content: '@Url.Action("EditPage", "Menu")?id=' + data[0].id,
                            end: function () {
                                table.reload("menuTable");
                                initTree();
                            }
                        });
                        break;
                    case 'addMenu':
                        top.layer.open({
                            title: '新增',
                            area: ["600px", "500px"],
                            type: 2,
                            maxmin: true,
                            content: '@Url.Action("EditPage", "Menu")?pid=' + selectedMenuId,
                            end: function () {
                                table.reload("menuTable");
                                initTree();
                            }
                        });
                        break;
                    case 'delMenu':
                        var ids = '';
                        for (var i = 0; i < data.length; i++) {
                            ids += data[i].id + ',';
                        }
                        if (ids.length < 1) {
                            top.layer.msg("请选择要删除的记录。", { icon: 0, offset: '15px' });
                            return;
                        }; //询问框
                        top.layer.confirm("您确认删除选定的记录吗？",
                            {
                                btn: ["确定", "取消"]
                            },
                            function () {
                                var sendData = { "ids": ids };
                                $.ajax({
                                    url: '@Url.Action("DeleteMuti", "Menu")',
                                    type: 'post',
                                    data: sendData,
                                    dataType: 'json',
                                    success: function (res) {
                                        if (res.success) {
                                            top.layer.msg(res.msg, { icon: 1, offset: '15px' });
                                            table.reload("menuTable");
                                            initTree();
                                        } else {
                                            top.layer.msg(res.msg, { icon: 2, offset: '15px' });
                                        }
                                    }
                                });
                            });
                        break;
                }
            });
        });
    ko.applyBindings(model);//注册vModel
</script>